<template>
  <div class="common-header-wrapper">
    <!-- 左侧logo -->
    <div class="left-section">
      <el-image class="logo" :src="logoUrl" fit="fit"/>
    </div>

    <!-- 右侧用户操作区 -->
    <div class="right-section">
      <el-dropdown trigger="hover">
        <router-link to="/user" class="no-decoration" @click="$router.push('/user')">
          <span class="el-dropdown-link">
            <el-avatar class="avatar" :size="30" :src="avatarUrl" @error="handleAvatarError"/>
            <span class="username">{{ username }}</span>
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </span>
        </router-link>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="logout" @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { ro } from 'date-fns/locale';

export default {
  data() {
    return {
      logoUrl: 'src/assets/logo.png',
      avatarUrl: 'https://tucang.cngal.top/api/image/show/861737ca05a782289d67deaf738cba33?https://image.cngal.org/images/2021/09/24/CG02.png',//你的头像链接
      username: '用户',
      defaultAvatarUrl: 'src/assets/default-avatar.png', // 默认头像
    };
  },
  methods: {
    handleAvatarError(event) {
      event.target.src = this.defaultAvatarUrl;
    },
    logout() {
      localStorage.removeItem('user');
      window.location.reload();
    },

  }
};
</script>

<style lang="scss" scoped>
.common-header-wrapper {
  height: 100%;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;

  .left-section {
    display: flex;
    align-items: center;

    .sidebar-toggle-btn {
      font-size: 20px;
      cursor: pointer;
      margin-right: 15px;
      transition: all 0.3s;
      &:hover {
        color: #409eff;
      }
    }

    .logo {
      width: 107.2px;
      height: 65.8px;
      margin-left: -39px;
    }
  }

  .right-section {
    display: flex;
    align-items: center;

    .el-dropdown-link {
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 14px;

      .el-avatar {
        margin-right: 8px;
      }

      .username {
        color: #606266;
        margin-right: 5px;
      }
    }

    .no-decoration {
      text-decoration: none;
    }
  }
}
</style>
